<template>
  <view class="tabbar-box">
    <u-tabbar v-model="current" active-color="#3c9cff" inactive-color="#bfbfbf" :fixed="true">
      <u-tabbar-item :text="item.text" :icon="item.icon" @click="onClick" v-for="(item,index) in list" :key="index"
                     class="item"></u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
export default {
  name: "custom-tabbar",
  data() {
    return {
      list: [{
        icon: 'home',
        selectedIconPath: "/static/home1.png",
        text: '首页',
        url: '/pages/index/index'
      },
	  {
	    icon: 'search',
	    selectedIconPath: "/static/home1.png",
	    text: '周边',
	    url: '/pages/near/near'
	  },
        {
          icon: 'account',
          selectedIconPath: "/static/mine.png",
          text: '我的',
          url: '/pages/my/my'
        },
      ],
      current: -1,
    };
  },
  created(){
    var path = '/' + this.$page.route

    this.list.forEach((it,i)=>{
      if(it.url == path){
        this.current = i
      }
    })
  },
  
  methods: {
    onClick(index) {
      let item = this.list[index]

      uni.navigateTo({
        url: item.url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tabbar-box ::v-deep .u-tabbar-item .u-tabbar-item__icon .u-icon__icon{
  font-size: 40rpx !important;
}
</style>
